<template>
  <div class="menu-container gray-400 shadow-md">
    <MenuLayout :menuData="data" :default="defaultUrl"></MenuLayout>
  </div>
</template>

<script lang="ts" setup>
import MenuLayout from "@/layout/data-manager/MenuLayout.vue"
import { ref } from "vue"

const props = defineProps(["menuData", "default"])

const data = ref(props.menuData)

const defaultUrl = ref(props.default)
</script>

<style lang="scss" scoped>
.menu-container {
  border: {
    right: 1px solid black;
  }
  position: fixed;
  width: 170px;
  height: 100vh;
  margin-bottom: 0;
  user-select: none;
  :deep(.el-menu) {
    border-right: none;
    width: 100%;
  }
  :deep(.el-menu-item:hover) {
    background-color: var(--color-gray-500);
  }
  :deep(.el-sub-menu__title:hover) {
    background-color: var(--color-gray-500);
  }
}
</style>
